import React, { useState, useEffect } from 'react';
import { Input, Row, Col, Select } from 'antd';
import FormItem from '../../../../components/FormItem';
import { compare } from '../../../../utils/compare';
import useProjectData from 'src/hook/useProjectData';
const layout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 18,
  },
};
export default function(props) {
  // 设置form值
  useEffect(() => {
    if (props.actionType !== 'add') {
      props.form.setFieldsValue({
        name: props.value.name,
        app_id: props.value.app_id,
        event_id: props.isImportant ? props.value.event_name : props.value.event_id,
        projectCode: props.value.projectCode,
        remark: props.value.remark,
      });
    }
    if (props.isFromTemplate) {
      props.form.setFieldsValue({
        app_id: undefined,
        event_id: undefined,
        product_id: undefined,
      });
    }
  }, [props.value]);

  const { name, code, remark } = props.value || {};
  const [projectCode, setProjectCode] = useState(props.value.projectCode);

  useEffect(() => {
    props.onGetAppProductEventIds && props.onGetAppProductEventIds({ projectCode });
  }, [projectCode]);
  const projectOptions = useProjectData()
  const formItems = [
    {
      label: {
        label: '策略名称',
        ...layout,
      },
      name: 'name',
      options: {
        initialValue: name,
        rules: [
          { required: true, message: '请输入策略名称' },
          { pattern: /^[\u4E00-\u9FA5_a-zA-Z0-9]+$/, message: '限中英文数字下划线' },
          { max: 128, message: '最长128个字符' },
        ],
      },
      component: (
        <Input placeholder='请填写策略名称' disabled={props.actionType === 'detail'} style={compare(props, 'name')} />
      ),
    },
    {
      label: {
        label: '策略CODE',
        ...layout,
      },
      name: 'code',
      options: {
        initialValue: code,
        rules: [
          { required: true, message: '请输入策略CODE' },
          { max: 128, message: '最长128个字符' },
          { pattern: /^[a-zA-Z][_a-zA-Z0-9]*$/, message: '限英文数字下划线，并以英文开头' },
        ],
      },
      component: (
        <Input
          placeholder='请填写策略CODE'
          disabled={props.actionType === 'update' || props.actionType === 'detail'}
          style={compare(props, 'code')}
        />
      ),
    },
    {
      label: {
        label: '所属项目',
        ...layout,
      },
      name: 'projectCode',
      options: {
        initialValue: code,
        rules: [
          { required: true, message: '请选择所属项目' },
        ],
      },
      component: (
        <Select
        onChange={(value) => {
          setProjectCode(value)
        }}
        style={{ width: '100%', ...compare(props, 'projectCode') }}
        disabled={props.actionType === 'detail'}
        placeholder={'请选择所属项目'}
      >
        {projectOptions
          .map((it) => {
            return (
              <Select.Option value={it.code} key={it.code}>
                {it.name}
              </Select.Option>
            );
          })}
      </Select>
      ),
    },
    {
      label: {
        label: '描述',
        ...layout,
      },
      name: 'remark',
      options: {
        initialValue: remark,
        rules: [{ max: 256, message: '最长256个字符' }],
      },
      component: (
        <Input
          placeholder='请输入简短描述，限256字'
          disabled={props.actionType === 'detail'}
          style={compare(props, 'remark')}
        />
      ),
    },
  ].filter(Boolean);

  return (
    <Row type='flex' gutter={20}>
      {formItems.map((item) => {
        return (
          <Col span={8} key={item.name}>
            <FormItem {...props} form={props.form} item={item} colNum={1} />
          </Col>
        );
      })}
    </Row>
  );
}
